import React, { useEffect, useState } from 'react'
import { Button, Card, Select, Form, Input, message, Table, Col, Row } from 'antd';
import { SearchOutlined } from '@ant-design/icons'
import style from '../hospitalSet/index.module.css'
import { getHosCityOrdistrictRequest, getHosListPageRequest, getHosListProvinceRequest,updateStatusRequest } from '@/api/hospital/hospitalList';
import { getHosListParamsType, getHosListProvinceReturn, getHosListReturnContentItemType, getHosSetReturnContentType } from '@/api/hospital/model/hospitalListType';
import { useNavigate } from 'react-router-dom';

export default function HospitalList() {
    const [form] = Form.useForm()
    //编程式路由
    const navigate = useNavigate()
    //当前页 
    const [page,setPage] = useState(1)
    //每页页数
    const [limit,setLimit] = useState(3)
    //总页数
    const [total,setTotal] = useState(0)
    //params参数
    const [searchParams,setSearchParams] = useState<getHosListParamsType>({})
    //保存医院分页数据
    const [hosListPage,setHosListPage] = useState<getHosSetReturnContentType>([])
    //加载
    const [isLoading,setIsLoading] = useState(false)
    //保存省份数据
    const [provinceList,setProinceList] = useState<getHosListProvinceReturn>([])
    //保存市数据
    const [cityList,setCityList] = useState<getHosListProvinceReturn>([])
    //保存区数据
    const [district,setDistrict] = useState<getHosListProvinceReturn>([])
    //保存医院类型
    const [hospitalType,setHospitalType] = useState<getHosListProvinceReturn>([])
    //定义状态渲染页面
    const [reRender,setReRender] = useState(true)
    //初始化获取医院分页
    useEffect(() => {
        setIsLoading(true)
        const getHosList = async () => {
            const re = await getHosListPageRequest(page,limit,{
                ...searchParams
            })
            setHosListPage(re.content)
            setTotal(re.totalElements) 
            setIsLoading(false)         
        }
        getHosList()
    },[page,limit,searchParams,reRender]) 
    //初始化获取省份
    useEffect(() => {
        const getHosListProvince = async () => {
            const re = await getHosListProvinceRequest()
            setProinceList(re)
        }
        getHosListProvince()
    },[])
    //初始化获取医院类型
    useEffect(() => {
        const getHospitalType = async () => {
            const re = await getHosCityOrdistrictRequest('10000')
            setHospitalType(re)
        }
        getHospitalType()
    },[])
    //选中省份触发的回调
    const selectProvinceHandle = async (id:string) => {
        const re = await getHosCityOrdistrictRequest(id)
        setCityList(re)
        form.setFieldsValue({cityCode:null,districtCode:null})
        setDistrict([])
    }
    //选中市触发回调
    const selectCityHandle = async (id:string) => {
        const re = await getHosCityOrdistrictRequest(id)
        setDistrict(re)
        form.setFieldsValue({districtCode:null})
    }
    //查询
    const finishHandle = (fieldValue: getHosListParamsType) => {
        console.log((fieldValue));
        setSearchParams(fieldValue)
    }
    //清空
    const clearHandle = () => {
        setSearchParams({})
        setDistrict([])
        setCityList([])
    }
    //更新状态
    const changeStatusHandle = (id:string,status:0|1) => {
        return async () => {
            await updateStatusRequest(id,status)
            setReRender(!reRender)
            message.success('更新状态成功')
        }
        
    }
    const columns = [
        {
            title: '序号',
            dataIndex: 'index',
            width: 80,
            render(_: any, __: any, index: number) {
                return index + 1
            }
        },
        {
            title: '医院logo',
            dataIndex:'logoData',
            render(logoData:string){
                return <img width={100} src={`data:image/jpeg;base64,${logoData}`} alt="" />
            }

        },
        {
            title: '医院名称',
            dataIndex: 'hosname',
        },
        {
            title: '等级',
            render(_:any,data:getHosListReturnContentItemType){
                return data.param.hostypeString
            }
        },
        {
            title: '详细地址',
            render(_:any,data:getHosListReturnContentItemType){
                return data.param.fullAddress
            }
        },
        {
            title: '状态',
            dataIndex: 'status',
            render(status:0|1){
                return status === 0 ? '下线' : '上线'
            }
        },
        {
            title: '创建时间',
            dataIndex: 'createTime',
        },
        {
            title: '操作',
            dataIndex: 'action',
            width: 120,
            render(_:any,data:getHosListReturnContentItemType) {
                const {id} = data
                const {status} = data
                return (
                    <div>
                        <Button type="primary"  onClick={() => {navigate(`/syt/hospital/hospitalshow/${id}`)}}>查看</Button>
                        <Button type="primary" >排班</Button>
                        <Button type='primary' onClick={changeStatusHandle(id,status === 0 ? 1 : 0)}>{status === 0 ? '上线' : '下线'}</Button>
                    </div>
                )
            }
        },
    ];
    return (
        <Card>
            <Form
                name="basic"
                wrapperCol={{ span: 30 }}
                form={form}
                onFinish={finishHandle}
            >
                <Row gutter={10}>
                    <Col span={4}>
                        <Form.Item name="provinceCode">
                            <Select
                                placeholder="请选择省"
                                allowClear
                                onChange={selectProvinceHandle}
                            >   
                                {
                                    provinceList.map(item => {
                                        return <Select.Option value={item.value} key={item.id}>{item.name}</Select.Option>
                                    })
                                }
                            </Select>
                        </Form.Item>
                    </Col>
                    <Col span={4}>
                        <Form.Item name="cityCode">
                            <Select
                                placeholder="请选择市"
                                allowClear
                                onChange={selectCityHandle}
                            >
                                {
                                    cityList.map(item => {
                                        return <Select.Option value={item.value} key={item.id}>{item.name}</Select.Option>
                                    })
                                }
                            </Select>
                        </Form.Item>
                    </Col>
                    <Col span={4}>
                        <Form.Item name="districtCode">
                            <Select
                                placeholder="请选择区"
                                allowClear
                            >
                                {
                                    district.map(item => {
                                        return <Select.Option value={item.value} key={item.id}>{item.name}</Select.Option>
                                    })
                                }
                            </Select>
                        </Form.Item>
                    </Col>
                    <Col span={4}>
                        <Form.Item
                            name="hosname"
                        >
                            <Input placeholder='医院名称' />
                        </Form.Item>
                    </Col>
                    <Col span={4}>
                        <Form.Item
                            name="hoscode"
                        >
                            <Input placeholder='医院编号' />
                        </Form.Item>
                    </Col>
                    <Col span={4}>
                        <Form.Item name="hostype">
                            <Select
                                placeholder="医院类型"
                                allowClear
                            >
                                {
                                    hospitalType.map(item => {
                                        return <Select.Option value={item.value} key={item.id}>{item.name}</Select.Option>
                                    })
                                }
                            </Select>
                        </Form.Item>
                    </Col>
                </Row>
                <Row gutter={10}>
                    <Col span={4}>
                        <Form.Item name="status">
                            <Select
                                placeholder="医院状态"
                                allowClear
                            >
                                <Select.Option value={1}>上线</Select.Option>
                                <Select.Option value={0}>下线</Select.Option>
                            </Select>
                        </Form.Item>
                    </Col>
                    <Col span={1.5}>
                        <Form.Item wrapperCol={{ span: 16 }}>
                            <Button type="primary" htmlType="submit" icon={<SearchOutlined />}>
                                查询
                            </Button>
                        </Form.Item>
                    </Col>
                    <Col span={1}>
                        <Form.Item wrapperCol={{ span: 16 }}>
                            <Button type="default" htmlType="reset" onClick={clearHandle}>
                                清空
                            </Button>
                        </Form.Item>
                    </Col>
                </Row>
            </Form>

            <Table
                columns={columns}
                dataSource={hosListPage}
                className={style.mr}
                bordered
                rowKey='id'
                scroll={{ x: 1100 }}
                loading={isLoading}
                pagination={{
                    current: page,
                    pageSize: limit,
                    total: total,
                    pageSizeOptions: [2, 3, 4, 5],
                    showSizeChanger: true,
                    showTotal(total) {
                        return `总共有${total}条数据`
                    },
                    onChange(page, pageSize) {
                        setPage(page)
                        setLimit(pageSize)
                    }
                }}

            />
        </Card>
    )
}
